<template>
    <div>
        <!-- 头部开始 -->
        <div style="height: 60px;background-color: #409EFF;display: flex;align-items: center;">
            <div style="width: 200px;display: flex;align-items: center;padding-left: 15px;">
                <img style="width: 48px;" src="@/assets/coffee.png" alt="">
                <span style="font-size: 24px;color: white ;margin-left: 5px;">
                    后台管理系统
                </span>

            </div>
            <div style="flex: 1"></div>
            <div style="width: fit-content;display: flex;align-items: center;padding-right: 10px;">
                <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" width="40px"
                    height="40px">
                <span style="margin-left: 5px;color: white;">{{data.user.name}}</span>
            </div>
        </div>

        <!-- 头部结束 -->
        <!-- 内容开始 -->
        <div style="display: flex;">
            <!-- 左侧导航菜单开始 -->
            <div style="width: 200px;border-right:1px solid #ddd;min-height: calc(100vh-60px);">
                <el-menu router :default-active="$router.currentRoute.value.path"
                    style="border: 0 ;">
                    <el-menu-item index="/manager/home">
                        <el-icon>
                            <House />
                        </el-icon>
                        系统首页
                    </el-menu-item>
                    <el-menu-item index="/manager/data">
                        <el-icon>
                            <DataAnalysis />
                        </el-icon>
                        数据统计
                    </el-menu-item>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item>管理员信息</el-menu-item>
                        <el-menu-item index="/manager/employee">员工信息</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/manager/person">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        个人信息
                    </el-menu-item>
                    <el-menu-item index="/manager/password">
                        <el-icon>
                            <Lock />
                        </el-icon>
                        修改密码
                    </el-menu-item>
                    <el-menu-item index="/login">
                        <el-icon>
                            <SwitchButton />
                        </el-icon>
                        退出登录
                    </el-menu-item>


                </el-menu>
            </div>
            <!-- 左侧导航菜单结束 -->
            <!-- 右侧内容开始 -->
            <div style="flex: 1;width: 0;background-color: #f7f8ff;padding: 10px;">
                <RouterView />
            </div>
            <!-- 右侧内容结束 -->
        </div>
        <!-- 内容结束 -->
    </div>

</template>
<script setup>
import { reactive, onMounted, watch } from 'vue';

const data = reactive({
    user: JSON.parse(localStorage.getItem('xm-pro-user')),
});
</script>
<style>
.el-menu .is-active {
    background-color: #e6ecf7;
}
html.dark body {
    background-color: #141414;
    color: #fff;
}

html.dark .el-menu {
    background-color: #1f1f1f;
    border-right: 1px solid #303030;
}

html.dark .el-menu-item {
    color: #e5e5e5;
}

html.dark .el-menu-item:hover {
    background-color: #262626;
}

html.dark .el-menu-item.is-active {
    background-color: #409EFF;
    color: #fff;
}

html.dark .el-sub-menu__title {
    color: #e5e5e5;
}

html.dark .el-sub-menu__title:hover {
    background-color: #262626;
}
</style>